dbusServides/extensions: Use Adw.PreferencesWindow

Adapt the new GNOME platform API for the upcoming 42. This makes
sure that we get the latest version of the stylesheet, as well as
support for the new dark mode.

Using the dedicated preference API also gives extensions with more
complex preferences an easier and standardized way for implementing
multi-page preferences.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2012>

diff --git a/js/dbusServices/extensions/css/application.css b/js/dbusServices/extensions/css/application.css
index 133e858f5984bbfe9adebeeb05ba909d19ce827f..4ef40660740a39809555a3b98b79ab2d0504556f 100644 (file)
--- a/js/dbusServices/extensions/css/application.css
+++ b/js/dbusServices/extensions/css/application.css
@@ -1,3 +1,5 @@
+.error-page preferencespage { margin: 30px; }
+
 .expander { padding: 12px; }
 .expander.expanded { border: 0 solid @borders; border-bottom-width: 1px; }
 .expander-toolbar {

diff --git a/js/dbusServices/extensions/extensionPrefsDialog.js b/js/dbusServices/extensions/extensionPrefsDialog.js
index cdcb85215162f60abb8da1d6ff6282fa68d33343..fe2b02afb5f1b0e862ceb4a303301a47eb3db4ed 100644 (file)
--- a/js/dbusServices/extensions/extensionPrefsDialog.js
+++ b/js/dbusServices/extensions/extensionPrefsDialog.js
@@ -1,20 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ExtensionPrefsDialog */
 
-const { Gdk, Gio, GObject, Gtk } = imports.gi;
+const { Adw, Gdk, Gio, GLib, GObject, Gtk } = imports.gi;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 
 var ExtensionPrefsDialog = GObject.registerClass({
     GTypeName: 'ExtensionPrefsDialog',
-}, class ExtensionPrefsDialog extends Gtk.Window {
+}, class ExtensionPrefsDialog extends Adw.PreferencesWindow {
     _init(extension) {
         super._init({
             title: extension.metadata.name,
             default_width: 600,
             default_height: 400,
+            search_enabled: false,
         });
-        this.set_titlebar(new Gtk.HeaderBar());
 
         try {
             ExtensionUtils.installImporter(extension);
@@ -26,12 +26,52 @@ var ExtensionPrefsDialog = GObject.registerClass({
             prefsModule.init(extension.metadata);
 
             const widget = prefsModule.buildPrefsWidget();
-            this.set_child(widget);
+            const page = this._wrapWidget(widget);
+            this.add(page);
         } catch (e) {
-            this.set_child(new ExtensionPrefsErrorPage(extension, e));
+            this._showErrorPage(e);
             logError(e, 'Failed to open preferences');
         }
     }
+
+    set titlebar(w) {
+        this.set_titlebar(w);
+    }
+
+    // eslint-disable-next-line camelcase
+    set_titlebar() {
+        // intercept fatal libadwaita error, show error page instead
+        GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
+            this._showErrorPage(
+                new Error('set_titlebar() is not supported for Adw.Window'));
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
+    _showErrorPage(e) {
+        while (this.visible_page)
+            this.remove(this.visible_page);
+
+        const extension = ExtensionUtils.getCurrentExtension();
+        this.add(new ExtensionPrefsErrorPage(extension, e));
+    }
+
+    _wrapWidget(widget) {
+        if (widget instanceof Adw.PreferencesPage)
+            return widget;
+
+        const page = new Adw.PreferencesPage();
+        if (widget instanceof Adw.PreferencesGroup) {
+            page.add(widget);
+            return page;
+        }
+
+        const group = new Adw.PreferencesGroup();
+        group.add(widget);
+        page.add(group);
+
+        return page;
+    }
 });
 
 const ExtensionPrefsErrorPage = GObject.registerClass({
@@ -43,7 +83,7 @@ const ExtensionPrefsErrorPage = GObject.registerClass({
         'revealer',
         'errorView',
     ],
-}, class ExtensionPrefsErrorPage extends Gtk.Widget {
+}, class ExtensionPrefsErrorPage extends Adw.PreferencesPage {
     static _classInit(klass) {
         super._classInit(klass);
 
@@ -61,9 +101,8 @@ const ExtensionPrefsErrorPage = GObject.registerClass({
     }
 
     _init(extension, error) {
-        super._init({
-            layout_manager: new Gtk.BinLayout(),
-        });
+        super._init();
+
         this._addCustomStylesheet();
 
         this._uuid = extension.uuid;

diff --git a/js/dbusServices/extensions/main.js b/js/dbusServices/extensions/main.js
index 97a28aa98d4de690366e0aac0094ae4ab6a68c0d..b13e52e3cfc1fbc255c880b120d2fea087f0a1ce 100644 (file)
--- a/js/dbusServices/extensions/main.js
+++ b/js/dbusServices/extensions/main.js
@@ -3,14 +3,14 @@
 imports.gi.versions.Gdk = '4.0';
 imports.gi.versions.Gtk = '4.0';
 
-const { GObject, Gtk } = imports.gi;
+const { Adw, GObject } = imports.gi;
 const pkg = imports.package;
 
 const { DBusService } = imports.dbusService;
 const { ExtensionsService } = imports.extensionsService;
 
 function main() {
-    Gtk.init();
+    Adw.init();
     pkg.initFormat();
 
     GObject.gtypeNameBasedOnJSPath = true;

diff --git a/js/dbusServices/extensions/ui/extension-error-page.ui b/js/dbusServices/extensions/ui/extension-error-page.ui
index eb0a044cc8100160eddbb084b14596c692174be6..ea089fb49871ba5824c12402c893426a96285d8a 100644 (file)
--- a/js/dbusServices/extensions/ui/extension-error-page.ui
+++ b/js/dbusServices/extensions/ui/extension-error-page.ui
@@ -1,107 +1,100 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="ExtensionPrefsErrorPage" parent="GtkWidget">
+  <template class="ExtensionPrefsErrorPage" parent="AdwPreferencesPage">
+    <style>
+      <class name="error-page"/>
+    </style>
     <child>
-      <object class="GtkScrolledWindow">
-        <property name="hscrollbar-policy">never</property>
-        <property name="propagate-natural-height">True</property>
+      <object class="AdwPreferencesGroup">
         <child>
-          <object class="GtkViewport">
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">12</property>
             <child>
-              <object class="GtkBox">
-                <property name="orientation">vertical</property>
-                <property name="margin-start">100</property>
-                <property name="margin-end">100</property>
-                <property name="margin-top">100</property>
-                <property name="margin-bottom">60</property>
-                <property name="spacing">12</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label" translatable="yes">Something’s gone wrong</property>
-                    <attributes>
-                      <attribute name="scale" value="1.44"/> <!-- x-large -->
-                    </attributes>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label" translatable="yes">We’re very sorry, but there’s been a problem: the settings for this extension can’t be displayed. We recommend that you report the issue to the extension authors.</property>
-                    <property name="justify">center</property>
-                    <property name="wrap">True</property>
-                  </object>
-                </child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">Something’s gone wrong</property>
+                <attributes>
+                  <attribute name="scale" value="1.44"/> <!-- x-large -->
+                </attributes>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">We’re very sorry, but there’s been a problem: the settings for this extension can’t be displayed. We recommend that you report the issue to the extension authors.</property>
+                <property name="justify">center</property>
+                <property name="wrap">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkFrame">
+                <property name="margin-top">12</property>
                 <child>
-                  <object class="GtkFrame">
-                    <property name="margin-top">12</property>
+                  <object class="GtkBox">
+                    <property name="hexpand">True</property>
+                    <property name="orientation">vertical</property>
                     <child>
-                      <object class="GtkBox">
-                        <property name="hexpand">True</property>
-                        <property name="orientation">vertical</property>
+                      <object class="GtkBox" id="expander">
+                        <property name="spacing">6</property>
+                        <style>
+                          <class name="expander"/>
+                        </style>
                         <child>
-                          <object class="GtkBox" id="expander">
-                            <property name="spacing">6</property>
-                            <style>
-                              <class name="expander"/>
-                            </style>
-                            <child>
-                              <object class="GtkImage" id="expanderArrow">
-                                <property name="icon-name">pan-end-symbolic</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Technical Details</property>
-                              </object>
-                            </child>
+                          <object class="GtkImage" id="expanderArrow">
+                            <property name="icon-name">pan-end-symbolic</property>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkRevealer" id="revealer">
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">Technical Details</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkRevealer" id="revealer">
+                        <child>
+                          <object class="GtkBox">
+                            <property name="orientation">vertical</property>
+                            <child>
+                              <object class="GtkTextView" id="errorView">
+                                <property name="monospace">True</property>
+                                <property name="editable">False</property>
+                                <property name="wrap-mode">word</property>
+                                <property name="left-margin">12</property>
+                                <property name="right-margin">12</property>
+                                <property name="top-margin">12</property>
+                                <property name="bottom-margin">12</property>
+                              </object>
+                            </child>
                             <child>
                               <object class="GtkBox">
-                                <property name="orientation">vertical</property>
+                                <style>
+                                  <class name="expander-toolbar"/>
+                                </style>
                                 <child>
-                                  <object class="GtkTextView" id="errorView">
-                                    <property name="monospace">True</property>
-                                    <property name="editable">False</property>
-                                    <property name="wrap-mode">word</property>
-                                    <property name="left-margin">12</property>
-                                    <property name="right-margin">12</property>
-                                    <property name="top-margin">12</property>
-                                    <property name="bottom-margin">12</property>
+                                  <object class="GtkButton">
+                                    <property name="receives-default">True</property>
+                                    <property name="action-name">page.copy-error</property>
+                                    <property name="has-frame">False</property>
+                                    <property name="icon-name">edit-copy-symbolic</property>
                                   </object>
                                 </child>
                                 <child>
-                                  <object class="GtkBox">
-                                    <style>
-                                      <class name="expander-toolbar"/>
-                                    </style>
-                                    <child>
-                                      <object class="GtkButton">
-                                        <property name="receives-default">True</property>
-                                        <property name="action-name">page.copy-error</property>
-                                        <property name="has-frame">False</property>
-                                        <property name="icon-name">edit-copy-symbolic</property>
-                                      </object>
-                                    </child>
-                                    <child>
-                                      <object class="GtkButton" id="homeButton">
-                                        <property name="visible"
-                                                  bind-source="homeButton"
-                                                  bind-property="sensitive"
-                                                  bind-flags="sync-create"/>
-                                        <property name="hexpand">True</property>
-                                        <property name="halign">end</property>
-                                        <property name="label" translatable="yes">Homepage</property>
-                                        <property name="tooltip-text" translatable="yes">Visit extension homepage</property>
-                                        <property name="receives-default">True</property>
-                                        <property name="has-frame">False</property>
-                                        <property name="action-name">page.show-url</property>
-                                      </object>
-                                    </child>
+                                  <object class="GtkButton" id="homeButton">
+                                    <property name="visible"
+                                              bind-source="homeButton"
+                                              bind-property="sensitive"
+                                              bind-flags="sync-create"/>
+                                    <property name="hexpand">True</property>
+                                    <property name="halign">end</property>
+                                    <property name="label" translatable="yes">Homepage</property>
+                                    <property name="tooltip-text" translatable="yes">Visit extension homepage</property>
+                                    <property name="receives-default">True</property>
+                                    <property name="has-frame">False</property>
+                                    <property name="action-name">page.show-url</property>
                                   </object>
                                 </child>
                               </object>